<template>
    <div class="l-rblock l-form-viewer">

        <div style="display: flex;">
            <div>
                <el-menu :collapse="true" style="height: 100%;" @select="handleSelect">
                    <el-menu-item v-for="item in toolList" :index="item.index" :key="item.name">

                        <l-img-select style="display:none" />
                        <i :class="item.icon" />
                        <span slot="title">
                            {{ item.name }}
                        </span>

                    </el-menu-item>
                </el-menu>
            </div>
            <div style="width: 100%;">
                <l-layout class="l-tab-page" v-if="!lr_loadPage" :left="240" :right="304">

                    <template #left>
                        <l-panel style="padding-right: 0;">
                            <template #title> {{ $t("图层") }}</template>
                            <div style="margin: 16px;">
                                <left-vue :centerList="centerList" :listIndex.sync="listIndex" />
                            </div>
                        </l-panel>
                    </template>
                    <div>
                        <div class="center_header_div">
                            <div>
                                <l-select placeholder="Helvetica" class="center_select" />
                                <el-divider direction="vertical" />
                                <l-select placeholder="24pt" class="center_select" />
                                <el-divider direction="vertical" />
                                <!-- <i class="learun-icon-digital-list icons" />
                                <i class="learun-icon-align-center icons" />
                                <el-divider direction="vertical icons" />
                                <i class="learun-icon-rank-down icons" />
                                <i class="learun-icon-list icons" />
                                <i class="learun-icon-bar icons" />
                                <i class="learun-icon-space icons" />

                                <el-divider direction="vertical icons" />
                                <i class="learun-icon-section icons" />
                                <i class="learun-icon-rank-down icons" />
                                <i class="learun-icon-align-right icons" />
                                <i class="learun-icon-select-multi icons" /> -->
                            </div>
                            <div></div>
                        </div>
                        <center-vue :centerList="centerList" :pageConfig="pageConfig" :listIndex.sync="listIndex" />

                    </div>
                    <template #right>
                        <l-panel>
                            <right-vue :pageConfig="pageConfig" :centerList="centerList" :listIndex="listIndex" />
                        </l-panel>
                    </template>
                </l-layout>
            </div>
        </div>


    </div>
</template>
<script>
import LeftVue from './comp/left.vue';
import CenterVue from './comp/center.vue';
import RightVue from './comp/right.vue';
export default {
    data() {
        return {
            listIndex: null,
            //  左侧选中
            toolList: [
                {
                    name: '文本',
                    icon: 'el-icon-s-order',
                    index: 'text',
                }, {
                    name: '图片',
                    icon: 'el-icon-picture-outline',
                    index: 'img',
                }, {
                    name: '条形码',
                    icon: 'learun-icon-bar-code',
                    index: 'bar',
                }

            ],
            centerList: [],
            pageConfig: {
                name: '', // 名称
                formClassify: '', // 分类
                dataSource: '', // 数据源
                formType: true, // 状态
                formDescribe: '', // 描述
                formPaper: 'a4', // 纸张
                formDirection: '纵向', //方向
                formDistance: 'cm',// 单位
                // 页面
                formW: 800, // 长
                formH: 800, //高
                formPaddingT: 12, // 上边距
                formPaddingL: 12, // 左边距
                formPaddingB: 12, // 下边距
                formPaddingR: 12, // 右边距

                formBackTransp: 100, // 背景透明度

                choseBackColor: '1', // 背景颜色选中
                fromBackColor: '#fff', // 背景色

                choseBackImg: '', // 背景图片选中
                formBackImage: '', // 背景图片
                backImageW: 800, //背景图片长度
                backImageH: 800, //背景图片高度
                backRepeat: '水平重复',
                //起始位置
                originT: 12, // 上
                originL: 12, // 左
                originB: 12, // 下
                originR: 12, // 右
                // 边框
                choseBorder: '', // 选中
                borderColor: '', // 颜色

                // 线条样式
                lineLabel: '',
                lineSize: 10, // 大小
                lineInterval: 0, //间隔

                // 页眉页脚
                choseHead: '',
                headT: 12, // 距离顶部
                choseBottom: '',
                headB: 12, // 距离底部

                formHeadAlign: '', // 方向
            }
        };
    },
    components: {
        LeftVue,
        CenterVue,
        RightVue,
    },
    methods: {
        handleSelect(key) {
            console.log(key);
            if (key == 'text') {
                const list = {
                    left: 390,
                    top: 100,
                    width: 200,
                    height: 50,
                    type: 'text',
                    activeFlag: true,
                    contentType: 'text',
                    text: '文本名称',
                    content: '文本内容',
                    fontFamily: 'Microsoft YaHei',
                    fontSize: '14',
                    fontWeight: 'normal',
                    writingMode: '',
                    fontStyle: '',
                    textDecoration: 'none',
                    opacity: 100,
                    // 文字颜色
                    choseTextColor: '1',
                    textColor: '#000',

                    // 背景颜色
                    choseBackground: '1',
                    background: '#fff',

                    // 文字描边
                    textShadow: '1',
                    textShadowColor: '',
                    // text-shadow: 2px 2px #ff0000;
                }
                this.centerList.push(list)
            } 
            // else if (key == 'bar') {
            // }
        }
    }
}
</script>
<style lang="scss">
.center_header_div {
    height: 56px;
    background: #F8F8F8;
    border-bottom: 1px solid #DDDDDD;

    .icons {
        font-size: 12px;
        margin-left: 8px;
    }
}

.center_header_div {
    display: flex;
    align-items: center;
}

.center_select {
    width: 160px;

    .el-input__inner {
        border: none;
        background: #F8F8F8;
    }
}
</style>